<template>
  <el-option :key="label+value"
    :label="concatString(source[label], source[concatKey ? concatKey : value])"
    :value="source[value]"
    :disabled="source.disabled"
    :title="concatString(source[label], source[concatKey ? concatKey : value])"
    class="group hover:bg-purple-1300 h-9 relative pl-3 pr-10">
    <div class="flex items-center gap-2 h-9">
      <span class="truncate text-gray-900 group-hover:text-white flex-shrink-0">{{ source[label] }}</span>
      <span class="truncate text-gray-500 group-hover:text-white website">{{ source[concatKey ? concatKey : value] }}</span>
      <!-- <span class="truncate"
        v-if="isRight"
        style="float:right;color:#939393">{{ source[value] }}</span> -->
    </div>
    <span class="selected-icon absolute top-0 right-0 bottom-0 items-center pr-3 text-purple-1300 group-hover:text-white">
      <svg xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
        class="block w-5 h-5">
        <path fill-rule="evenodd"
          d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
          clip-rule="evenodd"></path>
      </svg>
    </span>
  </el-option>
</template>
<script>
export default {
  name: 'ElOptionNode',
  props: {
    // 每一行的索引
    index: {
      type: Number,
      default: 0,
    },
    // 每一行的内容
    source: {
      type: Object,
      default() {
        return {}
      },
    },
    // 需要显示的名称
    label: {
      type: String,
      default: '',
    },
    // 绑定的值
    value: {
      type: String,
      default: '',
    },
    // 是否拼接label | value
    isConcat: {
      type: Boolean,
      default: false,
    },
    // 拼接label、value符号
    concatSymbol: {
      type: String,
      default: ' | ',
    },
    // 右侧是否显示绑定的值
    isRight: {
      type: Boolean,
      default() {
        return false
      },
    },
    // 拼接的字段
    concatKey: {
      type: String || null,
      default: null,
    },
  },
  methods: {
    concatString(a, b) {
      a = a || ''
      b = b || ''
      if (this.isConcat) {
        return a + (a && b ? this.concatSymbol : '') + b
      }
      return a
    },
  },
}
</script>
<style lang='scss' scoped>
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: rgba(0, 0, 0, 0);
}
.selected-icon {
  display: none;
}
.selected {
  .selected-icon {
    display: flex;
  }
  .website {
    font-weight: 400;
  }
}
</style>


